import { IDomEditor, IModalMenu, SlateNode } from '@wangeditor/editor'
export class MyModalMenu {
  // class MyModalMenu {                     

  constructor() {
    this.title = 'My menu'
    // this.iconSvg = '<svg >...</svg>'
    this.tag = 'button'
    this.showModal = true
    this.modalWidth = 300
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive (editor) {

    return false
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue (editor) {

    return ''
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled (editor) {

    return false
  }

  // 点击菜单时触发的函数
  exec (editor, value) {

  }

  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode (editor) {

    return null // modal 依据选区定位
  }

  // 定义 modal 内部的 DOM Element
  getModalContentElem (editor) {


    const $content = $('<div></div>')
    const $button = $('<button>do something</button>')
    $content.append($button)

    $button.on('click', () => {
      editor.insertText(' hello ')
    })

    return $content[0] // 返回 DOM Element 类型

    // PS：也可以把 $content 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能
  }
}